<template>
  <div>
    {{count}}&nbsp;&nbsp;&nbsp;
    <button @click="changeCount">changeCount</button>
    <br />
    {{name}}&nbsp;&nbsp;&nbsp;
    <button @click="changeName">changeName</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
  const count = ref(0);
  const changeCount = ()=>{
    count.value++
  }
  watch(count, (newValue, oldValue)=>{
    console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
  })

  const name = ref("chenbin")
  const changeName = ()=>{
    name.value += '_'
  }
  watch(name, (newValue, oldValue)=>{
    console.log(`name发生了变化，老值为${oldValue},新值为${newValue}`)
  })
</script>

<style scoped>

</style>
